<template>
<div class="uhomebox">
    <div class="title">
      <h2 style="display:inline-block" @click="history(1)" ref="point0">个人信息</h2>
      <h2 style="display:inline-block" @click="history(0)" ref="point1">兑换记录</h2>
    </div>
    <div class="box0">
      <div class="img_box0">
        <router-view></router-view>
            
      </div>
    </div>
    <div class="box1">

    </div>
</div>
</template>

<script>
import {mapState} from 'vuex'
  export default {
    name:'userhome',
    data() {
      return {
        aa:'',
        form:{
          newpassword: '',
          oldpassword:'',
          price:''
        },
        dialogFormVisible:false,
        formLabelWidth:'100px',
      }
    },
    computed:{
    ...mapState({
        'ss':state=>state.userinfo
    }),
    },
    created(){
      if(this.ss.gender==0){
        this.aa="女"
      }else{
        this.aa="男"
      }
    },
    methods: 
    {
    // toLogin(){
    //   this.$router.push('login')
    // },
    // toStore(){
    //     ulli.style.backgroundColor='pink';
    // },
    // passChange(){
    //   console.log(this.form.name);
    // },
    history(index){
      if(index==1){
        this.$refs.point0.style.borderBottom='solid 4px pink'
        this.$refs.point1.style.borderBottom='solid 0px pink'
        this.$router.push('userinfo')
      }else{
        this.$refs.point0.style.borderBottom='solid 0px pink'
        this.$refs.point1.style.borderBottom='solid 4px pink'
        this.$router.push('history')
      }
    },
    async changlist(){
      const data = await this.aPut('/user/changePassword',
      {oldPassword:this.form.oldpassword,
      newPassword:this.form.newpassword})
        this.dialogFormVisible = false;
        console.log(data);
        this.$router.replace('/login')
    },
    // info(){
    // }
  }
  }
</script>

<style scoped>
    .uhomebox{
      color:black;      
    }
    .title{
        width: 100%;
        height: 74px;
        box-shadow: 0px 2px 2px #333333;
    }
    .title h2{
      float: left;
      padding: 0 20px;
    }
    .img_box0{
        text-align: left;
        margin: 50px;
    }
    .img_box0 a{
      margin: 20px 50px;
    }
    .img_box0 img{
        width: 100px;
        height: 100px;
        border-radius: 100px;
        margin: 10px;
        /* text-align: left; */
         /* margin-bottom: 20px; */
    }
    .box0{
      width: 90%;
      height: 100%;
    }
</style>